<template>
   	<div class="app-container">
		<el-form :model="form" ref="formRef" inline >
			<el-form-item label="姓名" prop="nickName" >
				<el-input v-model="form.nickName" placeholder="请输入姓名" />
			</el-form-item>
			<el-form-item label="部门" prop="deptId" >
				<el-tree-select
                        v-model="form.deptId"
                        :data="deptList"
                        :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                        value-key="deptId"
                        placeholder="选择部门"
                        check-strictly
                     />
			</el-form-item>
			<el-form-item label="角色" prop="roleId" >
				<el-select v-model="form.roleId" placeholder="请选择角色" clearable >
					<el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
				</el-select>
			</el-form-item>
			<el-form-item label="岗位" prop="postId" >
				<el-select v-model="form.postId" placeholder="请选择岗位" clearable >
					<el-option v-for="item in postList" :key="item.postId" :label="item.postName" :value="item.postId" />
				</el-select>
			</el-form-item>
			<el-form-item label="状态" prop="status" >
				<el-select v-model="form.status" placeholder="请选择状态" clearable >
					<el-option label="正常" value="0" />
					<el-option label="停用" value="1" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="queryList">查询</el-button>
				<el-button @click="resetForm">重置</el-button>
				<el-button type="primary" @click="onAdd({})">新增</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="tableData" >
			<el-table-column type="index" label="序号" align="center" width="60px" />
			<!-- <el-table-column prop="userId" label="ID" align="center" ></el-table-column> -->
			<el-table-column prop="userName" label="账号" align="center" ></el-table-column>
			<el-table-column prop="nickName" label="姓名" align="center" ></el-table-column>
			<el-table-column prop="phoneNumber" label="手机号" align="center" ></el-table-column>
			<el-table-column prop="deptName" label="部门" align="center" ></el-table-column>
			<el-table-column prop="roleName" label="角色" align="center" ></el-table-column>
			<el-table-column prop="postName" label="岗位" align="center" ></el-table-column>
			<el-table-column prop="status" label="状态" align="center" >
				<template #default="{ row }">
					<el-tag :type="row.status === '0' ? 'success' : 'danger'">{{ row.status === '0' ? '正常' : '停用' }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center" ></el-table-column>
			<el-table-column label="操作" align="center" >
				<template #default="{ row }">
					<el-button type="text" @click="onAdd(row)">编辑</el-button>
					<el-button v-if="row.status == '1'" type="text" @click="switchStatus(row, '0')">启用</el-button>
					<el-button v-else type="text" @click="switchStatus(row, '1')">停用</el-button>
					<!-- <el-button type="text" @click="deleteUser(row.userId)">删除</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<pagination class="pagination-footer" :total="queryParams.total" v-model:page="queryParams.pageNo" 
		v-model:limit="queryParams.pageSize" @pagination="queryList"/>

		<user-dialog ref="userDialogRef" :roleList="roleList" :postList="postList" :deptList="deptList" @rest="rest"></user-dialog>
   	</div>
</template>
<script>
import { nextTick, reactive, toRefs } from "vue"
import { getRoleList } from "@/api/system/role"
import { getPost } from "@/api/system/post";
import { getDepartment } from "@/api/system/dept";
import { getUser, switchUserStatus, deleteUserInfo } from "@/api/system/user"
import userDialog from "./components/userDialog.vue";

export default {
   	name: "temp",
	components: { userDialog },
   	setup() {
		const { proxy } = getCurrentInstance();
       	const data = reactive({
           	form: {},
			formRef: null,
			tableData: [],
			userDialogRef: null,
			roleList: [],
			postList: [],
			deptList: [],
			queryParams: {
				pageNo: 1,
				pageSize: 10,
				total: 0,
			}
       	})

		const querySelectList = () => {
			getRoleList().then(res => {
				data.roleList = res.data
			})
			getPost().then(res => {
				data.postList = res.data
			})
			getDepartment().then(res => {
				data.deptList = proxy.handleTree(res.data, "deptId");
			})
		}

		const queryList = () => {
			getUser(data.form).then(res => {
				data.tableData = res.data.rows
				data.queryParams.total = res.data.totalRows
			})
		}

		const onAdd = (row) => {
		    nextTick(()=>{
				data.userDialogRef.openDialog(row)
			})
		}

		const resetForm = () => {
			data.formRef.resetFields();
			queryList()
		}

		const rest = () => {
			queryList()
		}

		const switchStatus = (row, val) =>{
			let obj = {
				userId: row.userId,
				status: val
			}
			switchUserStatus(obj).then(res => {
				proxy.$modal.msgSuccess(res.msg)
				queryList()
			})
		}

		const deleteUser = (row) => {
			console.log(row, 'row');
			deleteUserInfo({
				userId: row
			}).then(res => {
				if(res.code == 200){
					queryList()
				}
			})
		}


		onMounted(() => {
			querySelectList()
			queryList()
		})

       	return {
           	...toRefs(data),
			resetForm,
			queryList,
			switchStatus,
			onAdd,
			deleteUser,
			rest
       	}
   	}
};
</script>
<style lang="scss" scoped>

</style>./components/userDialog.vue